<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .table-bordered {
            border: 9px solid #23c9ce;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!--栅格系统 处理标题-->
            <div class="row">
                <div class="col-sm-12" style="text-align: center">
                    <h1>{{msg}}</h1>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <button @click="addRow" class="btn btn-primary btn-sm">添加</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <table width="100%" class="tab table-striped table-bordered table-hover">
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>价格</th>
                            <th>数量</th>
                        </tr>
                        <tr v-for="good,index in goods" style="text-align: center" :key="good.id">
                            <td>{{good.id}}</td>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                            <td>
                                <button  @click="delRow(good.id)" class="btn btn-danger btn-sm">删除</button>&nbsp;&nbsp;&nbsp;
                                <button  @click="detailRow(good.id)" class="btn btn-info btn-sm">修改</button>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <form action="">
                    <div class="form-group" v-show="good.id" >
                        <label>序号</label>
                        <input type="text" class="form-control" readonly v-model="good.id">
                    </div>
                    <div class="form-group" >
                        <label>名称</label>
                        <input type="text" class="form-control" v-model="good.name">
                    </div>
                    <div class="form-group">
                        <label>价格</label>
                        <input type="text" class="form-control" v-model="good.price">
                    </div>
                    <div class="form-group">
                        <label>数量</label>
                        <input type="text" class="form-control" v-model="good.count">
                    </div>

                    <input type="button" @click="saveOrUpdate" value="提交">
                </form>
            </div>
        </div>
    </div>

</body>
</html>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>



<script>
    //创建axios共用
    let instance = axios.create({
        baseURL:"http://localhost:9000/good/",
        timeout:5000
    });
    // //响应拦截器
    // instance.interceptors.response.use(res=>{
    //     if (res.data.code===200) {
    //         return res;
    //     }
    // })
    //请求拦截器
    //响应拦截器
    instance.interceptors.response.use(res=> {
        return res;
    },(err)=>{
        alert('后端服务出错啦,请稍后再试!!!');
    });

    var app = new Vue({
        el: "#app",
        data: {
            msg: "商品列表",
            goods: [],//定义商品列表
            good: {},//定义对象
        },
        methods: {
            findAll(){
                instance.post("/list").then(res=>
                this.goods=res.data.data
            )},
            addRow(){

            },
            saveOrUpdate(){
                if (!this.good.name) {
                    alert("商品名称不能为空!");
                    return false;
                }
                if (!this.good.price) {
                    alert("价格不能为空!");
                    return false;
                }
                if (!this.good.count) {
                    alert("数量不能为空!");
                    return false;
                }
                instance.post("/saveOrUpdate",this.good).then(res=> {
                    alert(res.data.msg)
                    this.good={}
                    this.findAll()
                })
            },
            delRow(id){
                instance.get("/delete/"+id).then(res=>this.findAll())
            },
            detailRow(id){
                instance.get("/details/"+id).then(res=>this.good=res.data.data)
            }
        },
        created(){
            this.findAll();
            console.log("goods"+this.goods)
        }
    })
</script>
